<template>
  <div>
    <div class="top">
      <div class="top-1">
        <div class="top-1-1">{{ topList.sum_user_count }}</div>
        <div class="top-1-1 top-1-2">用户数量</div>
        <i class="el-icon-user top-1-1 icon1"></i>
      </div>
      <div class="top-1">
        <div class="top-1-1">{{ topList.sum_washhouse_count }}</div>
        <div class="top-1-1 top-1-2">洗衣房数</div>
        <i class="el-icon-school top-1-1 icon1"></i>
      </div>
      <div class="top-1">
        <div class="top-1-1">{{ topList.sum_washmachine_count }}</div>
        <div class="top-1-1 top-1-2">洗衣机数</div>
        <i class="el-icon-coffee top-1-1 icon1"></i>
      </div>
      <div class="top-1">
        <div class="top-1-1">{{ topList.sum_order_count }}</div>
        <div class="top-1-1 top-1-2">订单总数</div>
        <i class="el-icon-document top-1-1 icon1"></i>
      </div>
      <div class="top-1">
        <div class="top-1-1">{{ topList.sum_earnings }}</div>
        <div class="top-1-1 top-1-2">平台收益</div>
        <i class="el-icon-price-tag top-1-1 icon1"></i>
      </div>
    </div>
    <div class="charts">
      <div class="charts-top">
        <div class="text1">请选择：</div>
        <el-select v-model="value">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="charts-top-1">
        <!-- <ve-histogram :data="chartData"></ve-histogram> -->
        <ve-line :data="chartData" :settings="chartSettings" style="color:blue;"></ve-line>
      </div>
    </div>
  </div>
</template>
<script>
import http from '../api';
export default {
  data() {
     this.chartSettings = {
        stack: { '用户': ['平台收益'] },
        area: true,
      }
    return {
      topList: {},
      chartData: {
        columns: ['dayTime', '平台收益',],
        rows: [],
      },
      DataShow: [],
      options: [
        {
          value: '选项1',
          label: '一个月',
        },
        {
          value: '选项2',
          label: '半年',
        },
        {
          value: '选项3',
          label: '一年',
        },
      ],
      value: '选项1',
    };
  },
  mounted() {
    http.topData().then((r) => {
      this.topList = r.data;
    });
    http.homeCharts().then((r) => {
      console.log(r);
      //   this.topList = r.data;
      this.DataShow = r.data.data;
      console.log(this.DataShow);
      for (var i = 0; i < this.DataShow.length; i++) {
        this.chartData.rows.push({
          dayTime: this.DataShow[i].earnings_time.slice(5, 10),
          '平台收益': this.DataShow[i].earnings_money,
        });
      }
      console.log(this.chartData.rows);
    });
    // axios.get('http://192.168.31.102/HomePage/getHomePageInfo').then((r) => {
    //   this.topList = r.data;
    // });
    // axios.get('http://192.168.31.102/HomePage/getAllEarnings').then((r) => {
    //   console.log(r);
    //   //   this.topList = r.data;
    //   this.DataShow = r.data.data;
    //   console.log(this.DataShow);
    //   for (var i = 0; i < this.DataShow.length; i++) {
    //     this.chartData.rows.push({
    //       dayTime: this.DataShow[i].earnings_time.slice(5, 10),
    //       '+': this.DataShow[i].earnings_money,
    //     });
    //   }
    //   console.log(this.chartData.rows);
    // });
  },
};
</script>
<style scoped>
.charts-top-1 {
  width: 80%;
  height: 300px;
  margin: auto;
  margin-top: 20px;
}
.text1 {
  margin-left: 20px;
}
.charts-top >>> .el-input__inner {
  width: 150px;
  outline: none;
}
.charts-top {
  width: 100%;
  height: 50px;
  background-color: #f6f6f8;
  display: flex;
  align-items: center;
}
.charts {
  width: 80%;
  height: 450px;
  margin: auto;
  border: 1px solid gainsboro;
  margin-top: 30px;
}
.top-1-1 {
  width: 100%;
  height: 40px;
  font-size: 33px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  color: gray;
}
.top-1-2 {
  height: 30px;
  font-size: 14px;
  color: #4543cb;
  margin: 0;
}
.icon1 {
  font-size: 33px;
  margin-top: 10px;
}
.top {
  width: 90%;
  height: 150px;
  margin: auto;
  display: flex;
  align-items: center;
}
.top-1 {
  width: 18%;
  height: 100%;
  border: 1px solid gainsboro;
  border-left: none;
}
.top .top-1:nth-child(1) {
  border-left: 1px solid gainsboro;
}
.top .top-1:nth-child(5) {
  width: 28%;
}
</style>